<template>
  <el-select
    v-model="env_select_value_swap"
    placeholder="请选择"
    @change="selectChange"
  >
    <el-option
      v-for="item in env_select_data"
      :key="item.env_id"
      :label="item.env_name"
      :value="item.env_id"
    >
    </el-option>
  </el-select>
</template>

<script>
import * as Request from "../../general/request";
import { ElMessage } from "element-plus";
import { ref, watch } from "vue";

export default {
  name: "env_select",
  props: {
    project_id: String,
    env_select_value: String,
  },
  setup(props, { emit }) {
    let env_select_data = ref([]);
    let env_select_value_swap = ref(props.env_select_value);

    const selectChange = (val) => {
      emit("childClick", val);
    };

    // const state = reactive({count: 0})
    // watch(
    //     () => state.count,
    //     (count, prevCount) => {
    //       /* ... */
    //     }
    // )
    watch(props, (newVal) => {
      // props.env_select_value = newVal;
      env_select_value_swap.value = newVal.env_select_value;
    });

    const get_env_hosts = async () => {
      const response = await Request.GET(
        "/background/home/resource_management/host_group_manage"
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          env_select_data.value = return_data.data;
          // ElMessage.success(return_data.msg)
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };
    get_env_hosts();

    return {
      env_select_data,
      selectChange,
      props,
      get_env_hosts,
      env_select_value_swap,
    };
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped></style>
